<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
        <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, maximum-scale=1.0, minimal-ui" />
        
        <title>Get Style Documentation</title>
        
        <script src="/js/greyspots.js" type="text/javascript"></script>
        <link href="/css/greyspots.css" type="text/css" rel="stylesheet" />
        
        <script src="/js/ace/ace.js" data-ace-base="/js/ace/" type="text/javascript" charset="utf-8"></script>
        <script src="/js/ace/ext-language_tools.js" type="text/javascript"></script>
        <script src="/js/ace/ext-searchbox.js" type="text/javascript"></script>
        
        <script src="doc-library/doc.js" type="text/javascript"></script>
        <link href="doc-library/doc.css" type="text/css" rel="stylesheet" />
    </head>
    <body>
        <gs-jumbo>
            <h1 class="text-center">Get Style</h1>
        </gs-jumbo>
            
        <gs-container min-width="sml;med;lrg">
            <h3>Function:</h3>
            <pre><code>GS.getStyle(&lt;ELEMENT&gt;, &lt;CSS-PROPERTY&gt;);</code></pre>
            
            <h3>Description:</h3>
            <p>This function is for getting a "computed" CSS property of an element. The "computed" style is the style that the browser decides on after reading the CSS. So if "background-color" is set three times on the same element and the browser chooses to use the third which we'll just say is "#0F0" (solid green) that would be the computed style. Notice: the browser may translate the choosen value to another format so it may turn "#0F0" into "rgb(0, 255, 0)" and that'll show through as the computed style.</p>
            
            <b class="doc-header">Examples:</b>
            <div class="doc-example-description">
                <span class="h3">GS.getStyle Example:</span><br />
                <p>In this example when you click the "Get Target 1 Style" button the "result" div will be populated with the computed "background-color" style of the "Target 1" element. When you click the "Get Target 2 Style" button the "result" div will be populated with the computed "background-color" style of the "Target 2" element.</p>
            </div>
            <gs-doc-example>
                <template for="html" height="16">
                    <gs-button onclick="testGetStyle('target-1')">Get Target 1 Style</gs-button>
                    <gs-button onclick="testGetStyle('target-2')">Get Target 2 Style</gs-button>
                    <br />
                    <div id="target-1" bg-primary>Target 1 ("#337AB7", may be reformatted by the browser)</div>
                    <div id="target-2" bg-success>Target 2 ("#DFF0D8", may be reformatted by the browser)</div>
                    <br />
                    <div id="result"></div>
                </template>
                <template for="js" height="10">
                    function testGetStyle(strID) {
                        document.getElementById('result').innerHTML =
                            GS.getStyle(
                                document.getElementById(strID),
                                'background-color'
                            );
                    }
                </template>
            </gs-doc-example>
        </gs-container>
    </body>
</html>